<template>
  <el-menu
      default-active="profileProps.activeMenuItem"
      background-color="#fbf8f8"
      :default-active="profileProps.activeMenuItem"
      :router="true"
      @open="handleOpen"
      @close="handleClose" style="border-right: none;">
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>个人信息</span>
      </template>
      <el-menu-item index="/profile/setPassword">
        <template #title>
          <el-icon><Edit /></el-icon>
          <span>修改密码</span>
        </template>
      </el-menu-item>
      <el-menu-item index="1-2">
        <template #title>
          <el-icon><EditPen /></el-icon>
          <span>修改资料</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <span>我的课程</span>
    </el-menu-item>
  </el-menu>
</template>
<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Edit,
  EditPen

} from '@element-plus/icons-vue'
import {useRouter} from "vue-router";

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const router = useRouter()
const profileProps = defineProps({
  activeMenuItem: {
    type: String,
    default: '/profile'
  }
})
</script>
<style scoped>

</style>